<template>
  <div class="box1">
    <div class="menu6">
      <img src="@/assets/images/组 2560.png">  <span><b>账号管理</b></span>
    
    </div>
    <!-- <el-button style="float:left; margin-top:33px;margin-left:20px;" @click="gofb" type="primary" size="mini" plain>发布任务</el-button> -->
    <!-- 头部 -->
    <el-button style="float:right; margin-top:33px;margin-right:30px" @click="dialogFormVisible = true" type="primary" size="mini">添加账号</el-button>
    <!-- 111111111111111111111111111111111111 -->
    <el-dialog title="添加账号" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="账号：" :label-width="formLabelWidth">
      <el-input style="width:400px" v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    
    <el-form-item label="账号类型：" :label-width="formLabelWidth">
      <el-input style="width:400px" v-model="form.name1" autocomplete="off"></el-input>
    </el-form-item>
    
    <el-form-item label="邮箱：" :label-width="formLabelWidth">
      <el-input style="width:400px" v-model="form.name2" autocomplete="off"></el-input>
    </el-form-item>
    
   
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
    <el-button size="mini" type="primary" @click="dialogFormVisible = false">确 定</el-button>
  </div>
</el-dialog>
    <!-- 111111111111111111111111111111111111 -->
    <div class="menu">
      <el-menu

        class="el-menu-demo"
        mode="horizontal"
        
      >
        <el-menu-item id="el-menu" index="1">用户账号</el-menu-item>
        <el-menu-item id="el-menu" index="2">企业账号</el-menu-item>
        <el-menu-item id="el-menu" index="3">管理端账号</el-menu-item
        >
      </el-menu>
      <div class="line"></div>
    </div>

    <!-- +++++++++++++++++++++++++++++++++++表格+++++++++++++++++++++++++++++++++++++++++++++++++++= -->
    <div class="table">
      <el-table :data="tableData"  class="tableBox" style="width: 98%">
        <el-table-column prop="numbering" label="序号" width="200">
        </el-table-column>
        <el-table-column prop="name" label="账号" width="210">
        </el-table-column>
        <el-table-column prop="reward" label="用户名" width="150">
        </el-table-column>
        <el-table-column prop="level" label="账户余额" width="155">
        </el-table-column>
        <el-table-column prop="time" label="累计积分" width="155">
        </el-table-column>
        <el-table-column prop="date" label="注册时间" width="155">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <!-- <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small"
            >
              移除
            </el-button>
          </template> -->
          <el-link type="danger">禁用</el-link>
        </el-table-column>
      </el-table>
    </div>
    <!-- +++++++++++++++++++分页+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++= -->
    <div class="pag">
      <div class="block">
        <!-- <span class="demonstration">直接前往</span> -->
        <el-pagination
          background
          
          layout="prev, pager, next, jumper"
          :total="1000"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
              dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px',

      tableData: [
        {
          numbering: "0123456789",
          name: "任务名称",
          reward: "1,000",
          level: "普通",
          time: "3天",
          date: "2016-05-01",
        },
        {
          numbering: "",
          name: "",
          reward: "",
          level: "",
          time: "",
          date: "",
        },
        {
          numbering: "",
          name: "",
          reward: "",
          level: "",
          time: "",
          date: "",
        },
        {
          numbering: "",
          name: "",
          reward: "",
          level: "",
          time: "",
          date: "",
        },
        {
          numbering: "",
          name: "",
          reward: "",
          level: "",
          time: "",
          date: "",
        },
        {
          numbering: "",
          name: "",
          reward: "",
          level: "",
          time: "",
          date: "",
        },
        {
          numbering: "",
          name: "",
          reward: "",
          level: "",
          time: "",
          date: "",
        },
        {
          numbering: "",
          name: "",
          reward: "",
          level: "",
          time: "",
          date: "",
        },
      ],
    };
  },
};
</script>
<style lang="scss">
.tableBox {
  th {
    padding: 0 !important;
    height: 40px;
    line-height: 40px;
  }
  td {
    padding: 0 !important;
    height: 40px;
    line-height: 40px;
  }
}
.box1 {
  width: 1250px;
  height: 660px;
  background-color: white;
  /* padding-top: 50px; */
}

#el-menu {
  background-color: white;
}

.menu {
  /* background: white; */
  padding-top: 5%;
  margin-left: 2%;
}
.menu6 img {
  /* background: white; */
//   padding-top: 5%;
   width: 30px;
    height: 30px;
    display: inline-block;
    // float: left;
    margin-top: 10px;
    margin-left: 2%;

}
.menu6 span{
  position: absolute;
  top: 92px;
  left: 292px;
  // padding-top: 20px;
 
  // margin-left: 10px;
  }
.head2 {
  float: left;
  
}
.table {
  padding-top: 10px;
  margin-left: 2%;
}
.pag {
  /* margin-top: 4%; */
  /* margin-left: 25%; */
  position: absolute;
  top: 680px;
  left: 35%;
}


</style>